<template>
  <div :value="value" :sub="sub">
    <el-table
      :data="value.pin"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="外设名称" align="center" width="150px" />
      <el-table-column prop="position" label="外设位置" align="center" width="150px" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status | typeFilter"> {{ row.status | statusFilter(row.values) }}</el-tag>
          <!-- <el-tag :type="row.status | typeFilter"> {{ row.status_txt }}</el-tag> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="模式" align="center">
        <template slot-scope="{row}">
          <el-tag> {{ row.mode | modeFilter }} </el-tag>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{row, $index}">
          <el-button v-loading.fullscreen.lock="row.loading" type="success" size="mini" @click="onMove(row, $index)"> 移动 </el-button>
        </template>
      </el-table-column> -->
    </el-table>

  </div>
</template>

<script>
import { CMD_AXIS } from '@/utils/cmd'

export default {
  name: 'Control',
  components: { },
  filters: {
    typeFilter(status) {
      if (status === -1) {
        return 'danger'
      } else if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'danger'
      } else if (status === 2) {
        return 'danger'
      }
    },
    statusFilter(status, values) {
      for (var i = 0; i < values.length; i++) {
        if (status === values[i].value) {
          return values[i].name
        }
      }
    },
    // statusFilter(status) {
    //   if (status === -1) {
    //     return '异常'
    //   } else if (status === 0) {
    //     return '正常'
    //   } else {
    //     return '开启'
    //   }
    // },
    modeFilter(mode) {
      if (parseInt(mode) === 1) {
        return '输入'
      }
      if (parseInt(mode) === 2) {
        return '输出'
      }
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      resetPosition: 0,
      showHeader: false,
      tableWidth: '150',
      dialogSelectPosFormVisible: false,
      selectIndex: 0,
      currentPositions: [],
      currentPosition: null,
      current_pin: null,
      current_index: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.setValue(val)
      }
    }
  },
  created() {
  },
  methods: {
    setValue(val) {
      console.log('value changed')
      this.value = val
      // console.log(val)
      // var values = values
      // for (var i = 0; i < val.length; i++) {
      //   if (device.value.pin[i].number === aswmsg.pin) {
      //   for (var j = 0; j < val.length; j++) {
      //     if (parseInt(values[j].value) === aswmsg.status) {
      //       console.log('ok:')
      //       device.value.pin[i].status_txt = values[j].name
      //     }
      //   }
      // }
    },
    onGetStatus(pin, index) {
      console.log('获取轴' + index + '状态')
      this.publish(this.sub, JSON.stringify({
        code: CMD_AXIS[index].get_status.toString(),
        msg: '1'
      }))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }
  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
  }
  .position-text{
    color: #ff00ff;
    font-size: 25px;
  }
</style>
